<template>
  <div class="search-container">
    <div style="margin: 20px auto">
      <SearchBox :open="false" @searchKeyword="searchKeyword"></SearchBox>
    </div>
    <div class="search-filter">
      <el-menu
        :default-active="searchAll"
        mode="horizontal"
        @select="handleSelect"
        background-color="#f6f8fa"
        active-text-color="#ff5c38"
      >
        <el-menu-item :index="searchAll">全部</el-menu-item>
        <el-menu-item :index="searchVideo">视频</el-menu-item>
        <el-menu-item :index="searchUser">用户</el-menu-item>
      </el-menu>
    </div>
    <div class="filter-content" v-if="searchType !== searchUser">
      <div class="filter-line">
        <el-radio-group
          v-model="searchSortType"
          size="mini"
          @change="searchData"
          :fill="filterItemColor"
        >
          <el-radio-button
            class="filter-item"
            v-for="(item, index) in searchSortTypes"
            :key="index"
            :label="item.value.toString()"
          >
            {{ item.desc }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="filter-line">
        <el-radio-group
          v-model="searchVideoTimeType"
          size="mini"
          @change="searchData"
          :fill="filterItemColor"
        >
          <el-radio-button
            class="filter-item"
            v-for="(item, index) in searchVideoTimeTypes"
            :key="index"
            :label="item.value.toString()"
          >
            {{ item.desc }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="filter-line">
        <el-radio-group
          v-model="firstLevelPartition"
          size="mini"
          @change="handleChangeFirstLevel"
          :fill="filterItemColor"
        >
          <el-radio-button class="filter-item" label="0"
            >所有分区</el-radio-button
          >
          <el-radio-button
            class="filter-item"
            v-for="(item, index) in firstLevelPartitions"
            :key="index"
            :label="item.id.toString()"
            >{{ item.partitionName }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="filter-line">
        <el-radio-group
          v-model="secondLevelPartition"
          size="mini"
          @change="handleChangeSecondLevel"
          v-if="firstLevelPartition !== '0'"
          :fill="filterItemColor"
        >
          <el-radio-button class="filter-item" label="0">全部</el-radio-button>
          <el-radio-button
            v-for="(item, index) in secondLevelPartitions"
            :key="index"
            class="filter-item"
            :label="item.id"
            >{{ item.partitionName }}</el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="filter-line">
        <el-radio-group
          v-model="thirdLevelPartition"
          size="mini"
          @change="searchData"
          v-if="secondLevelPartition !== '0' && thirdLevelPartitions.length > 0"
          style="padding-bottom: 20px"
          :fill="filterItemColor"
        >
          <el-radio-button class="filter-item" label="0">全部</el-radio-button>
          <el-radio-button
            v-for="(item, index) in thirdLevelPartitions"
            :key="index"
            class="filter-item"
            :label="item.id"
            >{{ item.partitionName }}</el-radio-button
          >
        </el-radio-group>
      </div>
    </div>
    <div v-if="searchType !== searchUser">
      <div class="search-wrapper" v-if="searchVideoResult.length > 0">
        <VideoCard
          v-for="item in searchVideoResult"
          :key="item.uvid"
          :videoObj="item"
          class="video-item"
        ></VideoCard>
      </div>
      <el-empty class="error-wrap" description="没有相关数据" v-else></el-empty>
    </div>
    <div v-else>
      <div style="height: 20px"></div>
      <div v-if="searchUserResult.length > 0">
        <UserCard v-for="(item, index) in searchUserResult" :key="index" :userInfo="item">
        </UserCard>
      </div>
      <el-empty class="error-wrap" description="没有相关数据" v-else></el-empty>
    </div>
    <div class="pagination" v-if="totalCount > 0">
      <el-pagination
        background
        :page-size="paginationParam.pageSize"
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import VideoCard from "@/components/video/VideoCard.vue";
import SearchBox from "@/components/common/SearchBox.vue";
import UserCard from "./UserCard.vue";
import {
  searchVideo,
  searchUser,
  getSearchVideoCondition,
} from "@/api/search";
export default {
  components: { VideoCard, SearchBox, UserCard },
  data() {
    return {
      // 过滤项背景颜色
      filterItemColor: "#67c139",
      searchAll: "1",
      searchVideo: "2",
      searchUser: "3",
      searchSortTypes: [],
      searchVideoTimeTypes: [],
      firstLevelPartitions: [],
      // 所有二级分区
      allSecondLevelPartitions: [],
      // 所有三级分区
      allThirdLevelPartitions: [],
      // 一级分区下的二级分区
      secondLevelPartitions: [],
      // 二级分区下的三级分区
      thirdLevelPartitions: [],
      keyword: this.$route.query.keyword,
      // 搜索类型：1：综合，2：视频，3：用户
      searchType: "1",
      searchSortType: "0",
      searchVideoTimeType: "0",
      firstLevelPartition: "0",
      secondLevelPartition: "0",
      thirdLevelPartition: "0",
      // 分页参数
      paginationParam: {
        pageSize: 20,
        pageNum: 1,
      },
      totalCount: 2,
      searchVideoResult: [
        // {
        //   cover:
        //     "https://gimg0.baidu.com/gimg/src=http%3A%2F%2Ftukuimg.bdstatic.com%2Fscrop%2Fcdead128d56385593b29cf3bb93a1327.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=0&size=f672_448&n=0&g=0n&q=80?sec=0&t=4facd3ee60ab4eb2e6b467e7aefd0a55",
        //   duration: "00:00:44",
        //   uvid: 7830,
        //   level: 0,
        //   likedCount: 1,
        //   title: "这里有一份森林防火动画宣传片,请收看!",
        //   uuid: 6,
        //   uploadTime: "2021-09-03 23:04:55",
        //   userNickname: "SYSTEM",
        //   viewCount: 0,
        // },
        // {
        //   cover:
        //     "https://gimg0.baidu.com/gimg/src=http%3A%2F%2Ftukuimg.bdstatic.com%2Fscrop%2Fcdead128d56385593b29cf3bb93a1327.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=0&size=f672_448&n=0&g=0n&q=80?sec=0&t=4facd3ee60ab4eb2e6b467e7aefd0a55",
        //   duration: "00:00:44",
        //   uvid: 7831,
        //   level: 0,
        //   likedCount: 2,
        //   title: "这里有一份森林防火动画宣传片,请收看!",
        //   uuid: 6,
        //   uploadTime: "2021-09-03 23:04:55",
        //   userNickname: "SYSTEM",
        //   viewCount: 0,
        // },
        // {
        //   cover:
        //     "https://gimg0.baidu.com/gimg/src=http%3A%2F%2Ftukuimg.bdstatic.com%2Fscrop%2Fcdead128d56385593b29cf3bb93a1327.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=0&size=f672_448&n=0&g=0n&q=80?sec=0&t=4facd3ee60ab4eb2e6b467e7aefd0a55",
        //   duration: "00:00:44",
        //   uvid: 7832,
        //   level: 0,
        //   likedCount: 3,
        //   title: "这里有一份森林防火动画宣传片,请收看!",
        //   uuid: 6,
        //   uploadTime: "2021-09-03 23:04:55",
        //   userNickname: "SYSTEM",
        //   viewCount: 0,
        // },
        // {
        //   cover:
        //     "https://gimg0.baidu.com/gimg/src=http%3A%2F%2Ftukuimg.bdstatic.com%2Fscrop%2Fcdead128d56385593b29cf3bb93a1327.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=0&size=f672_448&n=0&g=0n&q=80?sec=0&t=4facd3ee60ab4eb2e6b467e7aefd0a55",
        //   duration: "00:00:44",
        //   uvid: 7833,
        //   level: 0,
        //   likedCount: 4,
        //   title: "这里有一份森林防火动画宣传片,请收看!",
        //   uuid: 6,
        //   uploadTime: "2021-09-03 23:04:55",
        //   userNickname: "SYSTEM",
        //   viewCount: 0,
        // },
        // {
        //   cover:
        //     "https://gimg0.baidu.com/gimg/src=http%3A%2F%2Ftukuimg.bdstatic.com%2Fscrop%2Fcdead128d56385593b29cf3bb93a1327.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=0&size=f672_448&n=0&g=0n&q=80?sec=0&t=4facd3ee60ab4eb2e6b467e7aefd0a55",
        //   duration: "00:00:44",
        //   uvid: 7834,
        //   level: 0,
        //   likedCount: 5,
        //   title: "这里有一份森林防火动画宣传片,请收看!",
        //   uuid: 6,
        //   uploadTime: "2021-09-03 23:04:55",
        //   userNickname: "SYSTEM",
        //   viewCount: 0,
        // },
        // {
        //   cover:
        //     "https://gimg0.baidu.com/gimg/src=http%3A%2F%2Ftukuimg.bdstatic.com%2Fscrop%2Fcdead128d56385593b29cf3bb93a1327.jpeg&refer=http%3A%2F%2Fwww.baidu.com&app=0&size=f672_448&n=0&g=0n&q=80?sec=0&t=4facd3ee60ab4eb2e6b467e7aefd0a55",
        //   duration: "00:00:44",
        //   uvid: 7835,
        //   level: 0,
        //   likedCount: 6,
        //   title: "这里有一份森林防火动画宣传片,请收看!",
        //   uuid: 6,
        //   uploadTime: "2021-09-03 23:04:55",
        //   userNickname: "SYSTEM",
        //   viewCount: 0,
        // },
      ],
      searchUserResult: [
        // {
        //   avatar: 'dd',
        //   uuid: 7,
        //   nickname: 'aaa',
        //   videoCount: 33,
        //   fansCount: 22,
        //   personalSign: 'dd',
        //   videoList:[
        //     {
        //       uvid: 1,
        //       cover: '',
        //       title: '',
        //       uploadTime: '',
        //     },
        //     {
        //       uvid: 2,
        //       cover: '',
        //       title: '',
        //       uploadTime: '',
        //     },
        //   ]
        // },
        // {
        //   avatar: 'dd',
        //   uuid: 8,
        //   nickname: 'ddd',
        //   videoCount: 33,
        //   fansCount: 22,
        //   personalSign: 'dd',
        //   videoList:[
        //     {
        //       uvid: 1,
        //       cover: '',
        //       title: '1111111111111',
        //       uploadTime: '',
        //     },
        //     {
        //       uvid: 2,
        //       cover: '',
        //       title: '22222222222222',
        //       uploadTime: '',
        //     },
        //     {
        //       uvid: 3,
        //       cover: '',
        //       title: '333333333333',
        //       uploadTime: '',
        //     }
        //   ]
        // }
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      getSearchVideoCondition().then((res) => {
        let data = res.data;
        this.searchSortTypes = data.searchStaticSortVOList;
        this.searchVideoTimeTypes = data.videoTimeTypeVOList;
        this.firstLevelPartitions = data.firstLevelPartitionList;
        this.allSecondLevelPartitions = data.secondLevelPartitionList;
        this.allThirdLevelPartitions = data.thirdLevelPartitionList;
      });
      this.searchData();
    },
    searchKeyword(keyword) {
      this.keyword = keyword;
      this.searchData();
    },
    handleSelect(index) {
      if (this.searchType !== index) {
        // 如果是变化了，重新请求
        this.searchType = index;
        this.searchData();
      }
    },
    searchData() {
      if (this.keyword.trim() === "") {
        return;
      }
      if (this.searchType !== this.searchUser) {
        // 搜视频
        let data = {
          keyword: this.keyword,
          searchSortType: this.searchSortType,
          searchVideoTimeType: this.searchVideoTimeType,
          firstLevelPartition: this.firstLevelPartition,
          secondLevelPartition: this.secondLevelPartition,
          thirdLevelPartition: this.thirdLevelPartition,
          pageSize: this.paginationParam.pageSize,
          pageNum: this.paginationParam.pageNum,
        };
        searchVideo(data).then((res) => {
          console.log("searchVideo");
        });
      } else {
        // 搜用户
        let data = {
          nickname: this.keyword,
          pageSize: this.paginationParam.pageSize,
          pageNum: this.paginationParam.pageNum,
        };
        searchUser(data).then((res) => {
          console.log("searchUser");
        });
      }
    },
    // 一级分区变更
    handleChangeFirstLevel() {
      if (this.firstLevelPartition !== "0") {
        this.secondLevelPartition = "0";
        this.secondLevelPartitions = this.allSecondLevelPartitions.filter(
          (item) => {
            return item.parentId == this.firstLevelPartition;
          }
        );
      }
      this.searchData();
    },
    // 二级分区变更
    handleChangeSecondLevel() {
      if (this.secondLevelPartition !== "0") {
        this.thirdLevelPartition = "0";
        this.thirdLevelPartitions = this.allThirdLevelPartitions.filter(
          (item) => {
            return item.parentId == this.secondLevelPartition;
          }
        );
      }
      this.searchData();
    },
    handleCurrentChange(val) {
      // 入参pageNum修改
      this.paginationParam.pageNum = val;
      this.searchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.search-container {
  width: 80%;
  min-width: 980;
  margin: auto;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.filter-content {
  background-color: #f6f8fa;
  border-bottom: 1px solid #e5e9ef;
}
.filter-line {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-left: 20px;
}
.search-wrapper {
  display: flex;
  justify-content: flex-start;
  // justify-content: space-between;
  flex-wrap: wrap;

  margin-top: 20px;
  .video-item {
    margin: 0 0 0 10px;
    // margin-left: 10px;
    width: 15vw;
    height: 250px;
  }
}

.error-wrap {
  width: 100%;
  margin-top: 20px;
  border: 1px solid #e5e9ef;
  text-align: center;
  font-size: 25px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>